<template>
  <div class="login">
    <div class="login_logo">
      <span class="logos"></span>
    </div>
    <van-form
      @validate-first="true"
      @failed="onFailed"
      class="form_login"
      validate-trigger="onSubmit"
      @submit="login"
    >
      <van-field
        v-model="value1"
        class="user"
        name="pattern"
        placeholder="请输入手机号或邮箱"
        :rules="[{ pattern, message: '请输入正确格式' }]"
      />
      <van-field
        v-model="value2"
        name="validator"
        class="password"
        type="password"
        placeholder="请输入密码"
        :rules="[{ validator, message: '密码为6-18位,且同时有数字和字母' }]"
      />
      <div style="margin: 40px 0px" class="button">
        <van-button
          round
          block
          type="info"
          native-type="submit"
          color="linear-gradient(to right, #ff9000, #ff5000)"
          >登录</van-button
        >
      </div>
    </van-form>
    <div class="register" @click="goDetail('/register', '')">
      <span>还没有账号?</span><a href="####">点击注册</a>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value1: '17763694576',
      value2: '123456a',
      time: 5000,
      pattern: /^[1][3,4,5,7,8][0-9]{9}$/ || /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/,
      user: this.$store.state.register.user
    }
  },
  created() {
  },
  methods: {
    validator(val) {
      return /^(?=.*\d)(?=.*[a-zA-Z])[\da-zA-Z~!@#$%^&*]{6,18}$/.test(val)
    },
    onFailed(errorInfo) {
      console.log('failed', errorInfo)
    },
    login() {
      const loginUser = {
        user: this.user,
        username: this.value1,
        password: this.value2
      }

      this.$store.commit('login/LOGIN', loginUser)
    }
  }
}
</script>
<style lang="scss" scoped>
.login {
  margin-bottom: 20px;
  padding: 0 20px;
  .login_logo {
    .logos {
      display: block;
      width: 80px;
      height: 80px;
      background: url(https://gw.alicdn.com/tfs/TB1puqzr6MZ7e4jSZFOXXX7epXa-160-160.png)
        no-repeat;
      background-size: contain;
      margin: 40px auto 0;
    }
  }
  .user,
  .password {
    // .van-field__body {
    border-bottom: 1px solid #ff5000;
    margin-bottom: 20px;
    // }
  }
  .register {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
  }
  .go_home {
    display: flex;
    align-items: center;
    span {
      font-size: 14px;
      color: red;
      line-height: 20px;
    }
  }
}
</style>
